<template>
	<el-collapse v-model="activeNames" class="ui-label-container">
		<el-collapse-item name="1">
			<template slot="title">
				<el-divider content-position="left">
					<view class="bold-text user-select-none">cc.Node</view>
				</el-divider>
			</template>

			<!-- Name -->
			<el-row>
				<el-col :span="spacing">Name</el-col>
				<el-col :span="24-spacing">{{treeItemData.name}}</el-col>
			</el-row>
			<!-- uuid -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">UUID</el-col>
				<el-col :span="24-spacing">{{treeItemData.uuid}}</el-col>
			</el-row>

			<!-- Position -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">Position</el-col>
				<el-col :span="24-spacing" class="ui-container">
					<el-tag size="medium" effect="plain">X</el-tag>
					<el-input-number size="mini" v-model="treeItemData.x" controls-position="right"
						@change="changePositionX"></el-input-number>
					<view class="u-m-l-10">
						<el-tag size="medium" effect="plain">Y</el-tag>
						<el-input-number size="mini" v-model="treeItemData.y" controls-position="right"
							@change="changePositionY"></el-input-number>
					</view>
				</el-col>
			</el-row>

			<!-- angle -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">Angle</el-col>
				<el-col :span="24-spacing" class="ui-container">
					<el-input-number size="mini" v-model="treeItemData.angle" controls-position="right"
						@change="handleChangeAngle"></el-input-number>
				</el-col>
			</el-row>

			<!-- Scale -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">Scale</el-col>
				<el-col :span="24-spacing" class="ui-container">
					<el-tag size="medium" effect="plain">X</el-tag>
					<el-input-number size="mini" v-model="treeItemData.scaleX" controls-position="right"
						@change="handleChangeScaleX" :step="0.1"></el-input-number>
					<view class="u-m-l-10">
						<el-tag size="medium" effect="plain">Y</el-tag>
						<el-input-number size="mini" v-model="treeItemData.scaleY" controls-position="right"
							@change="handleChangeScaleY" :step="0.1"></el-input-number>
					</view>
				</el-col>
			</el-row>

			<!-- Anchor -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">Anchor</el-col>
				<el-col :span="24-spacing" class="ui-container">
					<el-tag size="medium" effect="plain">X</el-tag>
					<el-input-number size="mini" v-model="treeItemData.anchorX" controls-position="right"
						@change="handleChangeAnchorX" :step="0.1"></el-input-number>
					<view class="u-m-l-10">
						<el-tag size="medium" effect="plain">Y</el-tag>
						<el-input-number size="mini" v-model="treeItemData.anchorY" controls-position="right"
							@change="handleChangeAnchorY" :step="0.1"></el-input-number>
					</view>
				</el-col>
			</el-row>

			<!-- Size -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">Size</el-col>
				<el-col :span="24-spacing" class="ui-container">
					<el-tag size="medium" effect="plain">W</el-tag>
					<el-input-number size="mini" v-model="treeItemData.width" controls-position="right"
						@change="changeSizeActionWidth"></el-input-number>
					<view class="u-m-l-10">
						<el-tag size="medium" effect="plain">H</el-tag>
						<el-input-number size="mini" v-model="treeItemData.height" controls-position="right"
							@change="changeSizeActionHeight"></el-input-number>
					</view>
				</el-col>
			</el-row>

			<!-- Color -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">Color</el-col>
				<el-col :span="24-spacing">
					<el-color-picker v-model="treeItemData.color" size="mini"
						@change="handleChangeColor"></el-color-picker>
				</el-col>
			</el-row>

			<!-- Opacity -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">Opacity</el-col>
				<el-col :span="24-spacing">
					<el-input-number size="mini" v-model="treeItemData.opacity" controls-position="right"
						@change="handleChangeOpacity" :min="0" :max="255" step-strictly></el-input-number>
				</el-col>
			</el-row>

			<!-- Skew -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">Skew</el-col>
				<el-col :span="24-spacing" class="ui-container">
					<el-tag size="medium" effect="plain">X</el-tag>
					<el-input-number size="mini" v-model="treeItemData.skewX" controls-position="right"
						@change="handleChangeSkewX" :step="0.1"></el-input-number>
					<view class="u-m-l-10">
						<el-tag size="medium" effect="plain">Y</el-tag>
						<el-input-number size="mini" v-model="treeItemData.skewY" controls-position="right"
							@change="handleChangeSkewY" :step="0.1"></el-input-number>
					</view>
				</el-col>
			</el-row>

			<!-- zIndex -->
			<el-row class="u-m-t-8">
				<el-col :span="spacing">zIndex</el-col>
				<el-col :span="24-spacing">
					<el-input-number size="mini" v-model="treeItemData.zIndex" controls-position="right"
						@change="handleChangezIndex" step-strictly></el-input-number>
				</el-col>
			</el-row>

		</el-collapse-item>
	</el-collapse>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: "ui-node",
		props: [
		],
		computed: {
			...mapState({
				uuid: state => state.app.uuid,
				treeItemData: state => state.app.treeItemData,
			})
		},
		data() {
			return {
				activeNames: ['1'],
				spacing: 4
			};
		},
		methods: {
			pluginSetNodeData(key, value) {
				this._evalCode(
					"window.pluginSetNodeData(" +
					"'" + this.uuid + "'," +
					"'" + key + "'," +
					"'" + value + "'" +
					")");
				this._freshNode();
			},
			changePositionX(value) {
				this.pluginSetNodeData('x', value);
			},
			changePositionY(value) {
				this.pluginSetNodeData('y', value);
			},
			changeSizeActionWidth(value) {
				this.pluginSetNodeData('width', value);
			},
			changeSizeActionHeight(value) {
				this.pluginSetNodeData('height', value);
			},
			handleChangeAngle(value) {
				this.pluginSetNodeData('angle', value);
			},
			handleChangeScaleX(value) {
				this.pluginSetNodeData('scaleX', value);
			},
			handleChangeScaleY(value) {
				this.pluginSetNodeData('scaleY', value);
			},
			handleChangeAnchorX(value) {
				this.pluginSetNodeData('anchorX', value);
			},
			handleChangeAnchorY(value) {
				this.pluginSetNodeData('anchorY', value);
			},
			handleChangeColor(value) {
				this._evalCode(
					"window.pluginSetNodeColor('" +
					this.uuid + "','" +
					value + "');");
				this._freshNode();
			},
			handleChangeOpacity(value) {
				this.pluginSetNodeData('opacity', value);
			},
			handleChangezIndex(value) {
				this.pluginSetNodeData('zIndex', value);
			},
			handleChangeSkewX(value) {
				this.pluginSetNodeData('skewX', value);
			},
			handleChangeSkewY(value) {
				this.pluginSetNodeData('skewY', value);
			},
		}
	}
</script>

<style>
	.ui-label-container {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		border-radius: 4px;
		border: 1px solid #EBEEF5;
		background-color: #FFF;
		overflow: hidden;
		color: #303133;
		-webkit-transition: .3s;
		transition: .3s;
	}

	.el-input-number /deep/ .el-input__inner {
		padding-left: 5px;
		padding-right: 40px;
	}

	/deep/ .el-tag--plain {
		background-color: #fff;
		border-color: #DCDFE6;
		color: #000;
	}
	.el-collapse {
		border-top: none;
		border-bottom: none;
		padding: 0px 15px;
		margin-top: 10px;
	}

</style>